<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="file" name="" id="files">
    <img src="" id="img">

    <script type="text/javascript">
        // 获取元素对象
        var inp = document.getElementById('files');
        var imgs = document.getElementById('img');
        // 给inp添加change时间
        inp.onchange=function(){
            // 读取原始文件
            file = this.files[0];
       
            var readers = new FileReader();
            // 读取文件
            readers.readAsDataURL(file)

            // 当文件读取完成执行获取新的url地址
            readers.onload=function(){
                console.log(readers)
                imgs.src=readers.result
            }
        }


        //   fileInput.addEventListener('change', function () {

        //         file = this.files[0];

        //      }, false)
        //      console.log('helo')
        // showBtn.addEventListener('click', function () {
        //     if (typeof file == 'undefined') {
        //         alert('请先选择图片')
        //         return
        //     }
        //     var reader = new FileReader();
        //     reader.addEventListener('load', function () {
        //             console.log('reader', reader)
        //             img.src = reader.result;
        //         }, false)

        //     reader.readAsDataURL(file)
        // })

    </script>
</body>
</html>